<!--
 * @Author: Wangtao
 * @Date: 2022-09-02 15:33:15
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-12 14:22:33
-->
<template>
  <div class="call-detail">
    <title-content :title="'通话信息'" adaption-height>
      <template v-slot:content>
        <div class="detail-info">
          <div class="detail-row">
            <div class="item">通话记录ID：{{ callRcordInfo._id }}</div>
          </div>
          <div class="detail-row">
            <div class="item">呼叫时间：{{ callRcordInfo.startTime }}</div>
            <div class="item">呼叫类型：{{ getCallTypeText(callRcordInfo.callType) }}</div>
          </div>
          <div class="detail-row">
            <div class="item">
              客户号码：{{
                callRcordInfo.extraNumber
                  ? callRcordInfo.customerNumber + '-' + callRcordInfo.extraNumber
                  : callRcordInfo.customerNumber
              }}
            </div>
            <div class="item">客户地区：{{ getProvince(callRcordInfo) }}</div>
          </div>
          <div class="detail-row">
            <div class="item">服务号：{{ callRcordInfo.trunkNumber || '--' }}</div>
            <div class="item">IVR语音导航：{{ callRcordInfo.ivrName || '--' }}</div>
          </div>
          <div class="detail-row">
            <div class="item">服务组：{{ callRcordInfo.queueName || '--' }}</div>
            <div class="item">
              员工：{{ callRcordInfo.agentName ? `${callRcordInfo.agentName}[${callRcordInfo.agentNumber}]` : '--' }}
            </div>
          </div>
          <div class="detail-row">
            <div class="item">呼叫状态：{{ getCallStatusName(callRcordInfo.status) }}</div>
            <div class="item">挂机方：{{ getHangUpSideName(callRcordInfo.hangUpSide) }}</div>
          </div>
          <div class="detail-row">
            <div class="item">通话时长：{{ getTimeLength(callRcordInfo.bridgeDuration) }}</div>
            <div class="item">排队时长：{{ getTimeLength(callRcordInfo.waitDuration) }}</div>
          </div>
          <div class="detail-row">
            <div class="item">满意度调查时长：{{ getTimeLength(callRcordInfo.satisfyDuration) }}</div>
            <div class="item">
              满意度调查结果：
              <satisfactions
                v-if="callRcordInfo.keys"
                :callType="callRcordInfo.callType"
                :keys="callRcordInfo.keys"
                :satisfactionData="satisfactionData"
              ></satisfactions>
              <span v-else>--</span>
            </div>
          </div>
        </div>
      </template>
    </title-content>
    <title-content
      :title="'录音'"
      v-if="callRcordInfo.doubleTrackFileUrl || callRcordInfo.recordFileUrl || callRcordInfo.voiceMailUrl"
    >
      <template v-slot:content>
        <waveSurfer
          :wavesurferId="'callDetail_' + callRcordInfo._id"
          :srcUrl="callRcordInfo.doubleTrackFileUrl || callRcordInfo.recordFileUrl || callRcordInfo.voiceMailUrl"
        ></waveSurfer>
      </template>
    </title-content>
    <title-content :title="'通话流程'" adaption-height>
      <template v-slot:content>
        <time-line :callId="callRcordInfo._id"> </time-line>
      </template>
    </title-content>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'

import titleContent from '@app/call-center/views/recent-calls/component/tab-component/customDetail/title-content.vue'

import timeLine from '@app/call-center/views/recent-calls/component/tab-component/common/mc-timeline/index.vue'
import { getData } from '@app/call-center/apis/caller-state'
import waveSurfer from '@/common/components/audio/index.vue'
import satisfactions from '@/app/call-center/views/call-record/satisfactions.vue'
import { getCallTimeLength } from '@/common/utils/common'
import { getCallStatusName } from '@app/customer/utils/common'
import { userModule } from '@/common/store/modules/user'

export default defineComponent({
  name: 'callDetail',
  components: {
    titleContent,
    timeLine,
    waveSurfer,
    satisfactions
  },
  props: {
    // 通话详情信息
    callRcordInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  // ----------------生命周期-----------------------
  setup() {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const USERMODULE = userModule()
    const filter = reactive({
      satisfactionData: {},
      getHangUpSideName(hangUpSide: string) {
        if (hangUpSide === 'AGENT') {
          return '座席挂机'
        } else if (hangUpSide === 'CUSTOMER') {
          return '客户挂机'
        } else if (hangUpSide === 'SYSTEM') {
          return '系统挂机'
        }
      },
      getCallTypeText(type: string) {
        let label = '未知类型'
        switch (type) {
          case 'incoming':
            label = '呼入'
            break
          case 'dialout':
            label = '外呼'
            break
          case 'transfer':
            label = '呼叫转移'
            break
          case 'consultTransfer':
            label = '咨询转移'
            break
          case 'webcall':
            label = '双向回呼'
            break
          case 'previewDialout':
            label = '预览外呼'
            break
          case 'autoDialout':
            label = '自动外呼'
            break
        }
        return label
      },
      getTimeLength(timeLength: any) {
        return getCallTimeLength(timeLength, false)
      },
      getCallStatusName(status: any) {
        return (getCallStatusName as any)[status]
      },
      getProvince(data: any) {
        let text = '未知'
        if (data.customerCountryCode === '86') {
          if (data.customerProvince) {
            text = data.customerProvince + '-' + data.customerCity
          }
        } else {
          if (data.customerCountry) {
            text = data.customerCountry
          }
        }
        return text
      }
    })
    // 获取满意度的配置
    const getSatisfaction = () => {
      getData({ accountId: USERMODULE.accountId || '' }).then((res) => {
        if (res && res.success && res.data) {
          filter.satisfactionData = res.data || {}
        }
      })
    }
    onBeforeMount(async () => {
      getSatisfaction() // 获取满意度配置
    })
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {
      ...toRefs(filter)
    }
  }
})
</script>

<style lang="stylus" scoped>
.call-detail
  width: 100%
  .detail-info
    width: 100%
    display: flex
    flex-direction: column
    .detail-row
      display: flex
      margin-bottom: 8px
      .item
        width 50%
        font-weight: 400
        font-size: 14px
</style>
